<template>
<div id="feedback">
  <!-- 页头 -->
  <PageHeader :lang="lang"></PageHeader>
  <div class="main" id="pageBody">
    <div class="form-title">
      <h1 v-text="lang.helpFeedbackTitle"></h1>
      <h3 v-text="lang.helpTitleTip"></h3>
    </div>
    <div class="form-fill">
      <!-- 邮箱 -->
      <div class="item">
        <span class="name">
          <font v-text="lang.helpEmail"></font>
          <i>*</i>
        </span>
        <span class="fill">
          <input type="text" id="email" name="" :placeholder="lang.helpFillEmail" v-model="emailAddress" @input="checkBtn">
          <i class="err-tips" v-show="emailErr" v-text="lang.helpEnterEmail"></i>
        </span>
      </div>
      <!-- 问题类型 -->
      <div class="item">
        <span class="name">
          <font v-text="lang.helpQueType"></font>
          <i>*</i>
        </span>
        <!-- 问题类型下拉 -->
        <div class="typeList fill">
          <input type="text" id="email" name="" :placeholder="lang.helpSelectType" v-model="queType" readonly="readonly"
           @click.stop="typeSelect = !typeSelect" @input="checkBtn">
          <ul v-show="typeSelect">
            <li v-for="(item, index) in typeList" @click="getProblemType(item.title, item.ID)">{{item.title}}</li>
          </ul>
        </div>
      </div>
      <!-- 问题详情 -->
      <div class="item">
        <span class="name">
          <font v-text="lang.helpQueDescription"></font>
          <i>*</i>
        </span>
        <span class="fill">
          <textarea type="text" id="email" name="" :placeholder="lang.helpQuePlaceholder" maxlength="1000" v-model="queContent" @input="checkBtn"></textarea>
        </span>
      </div>
      <!-- 上传附件 -->
      <div class="item">
        <span class="name">
          <font v-text="lang.helpEnclosure"></font>
        </span>
        <!-- 上传 -->
        <div id="upBox">
          <div id="inputBox">
            <input type="file" :title="lang.helpAddFile" id="file" multiple accept="image/*,.doc,.docx,.xml"/>
            <span class="text">
              <img src="./images/annex.png" />
              <font v-text="lang.helpAddFile"></font>
            </span>
            <p class="textTip" v-text="lang.helpFileSize" v-show="defaultTips"></p>
          </div>
          <div id="imgBox">
            <div class="imgContainer" v-for="(item, index) in filesList" :key="index">
              <img src="./images/annex.png" />
              <span v-text="item.name"></span>
              <p class="imgDelete" @click="removeImg(this, index)">X</p>
            </div>
          </div>
        </div>
      </div>
      <button id="submit" v-text="lang.helpSubmit" :class="{blue:formEmpty}" :disabled="dbClick" @click="submitFrom"></button>
    </div>
  </div>
  <!-- 页尾 -->
  <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
</div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
import ModalApi from '@/components/SwModal/api.js'
import {mapActions} from 'vuex'
export default {
  mixins: [commonMixins],
  data () {
    return {
      emailAddress: '',   // 邮箱
      queType: '',        // 问题类型
      queId: '',
      queContent: '',     // 问题详情
      userName: '',
      defaultTips: false,  // 图片大小默认提示语
      pageIndex: 0,
      pageSize: 10,
      typeList: [],      // 问题类型
      typeSelect: false,  // 问题类型下拉
      emailErr: false,    // 邮箱错误提示
      filesList: [],
      formEmpty: false,
      dbClick: false
    }
  },
  components: {

  },
  watch: {
    langKey () {
      let lk = window.localStorage.getItem('langKey')
      this.langkey = lk === 'zh-CN' ? 'zh-CN' : 'en'
      this.queType = ''
      this.queId = ''
      this.getQueType()
    }
  },
  methods: {
    ...mapActions([ 'switchLang' ]),
    init () {
      var self = this
      if (window.localStorage) {
        var lkey = window.localStorage.getItem('langKey')
        if (lkey) {
          self.langkey = lkey === 'zh-CN' ? 'zh-CN' : 'en'
        } else {
          self.langkey = 'zh-CN'
          window.localStorage.setItem('langKey', self.langkey)
        }
      }
    },
    // 获取问题类型
    getQueType () {
      let self = this
      this.$http.post('FHelpsClass/GetList', {
        LanguageType: self.langkey === 'zh-CN' ? 'zh-CN' : 'en',
        pageIndex: self.pageIndex || 0,
        pageSize: self.pageSize || 10
      })
      .then((res) => {
        self.typeList = res.Data
      })
    },

    // 获取选择的问题类型
    getProblemType (title, id) {
      this.queType = title
      this.queId = id
      this.typeSelect = false
    },

    // 提交表单
    submitFrom () {
      let self = this
      if (self.dbClick) {
        return
      }
      if (self.checkForm()) {
        self.dbClick = true
        let formData = new FormData()
        formData.append('FeedbackType', self.queId)
        formData.append('Context', self.queContent)
        formData.append('UserName', self.userName)
        formData.append('Mobile', self.emailAddress)
        for (let i = 0; i < self.filesList.length; i++) {
          let file = self.filesList[i]
          formData.append('file', file)
        }
        self.$http.post('Feedback/UploadFile', formData, {
          contentType: false,
          processData: false,
          config: {
            headers: { 'Content-Type': 'multipart/form-data' }
          }
        })
        .then((res) => {
          self.queType = ''
          self.queContent = ''
          self.emailAddress = ''
          self.filesList = []
          self.checkBtn()
          self.dbClick = false
          if (res && res.StatusCode === '200') {
            ModalApi.message(this.lang.helpSubmitSucc)
            self.dbClick = false
          } else {
            ModalApi.message(this.lang.helpSubmitFail)
          }
        })
      } else {
        self.dbClick = false
      }
    },

    // 检查表单
    checkForm () {
      let self = this
      var legal = false
      var email = self.emailAddress
      var type = self.queId
      var description = self.queContent
      if (email.replace(/(^\s*)|(\s*$)/g, '') === '') {
        ModalApi.message(this.lang.helpEnterEmail)
        legal = false
      } else if (!self.isEmail(email.replace(/(^\s*)|(\s*$)/g, ''))) {
        ModalApi.message(this.lang.register_EmailErr)
        legal = false
      } else if (type.replace(/(^\s*)|(\s*$)/g, '') === '') {
        ModalApi.message(this.lang.helpSelectTypeTips)
        legal = false
      } else if (description.replace(/(^\s*)|(\s*$)/g, '') === '') {
        ModalApi.message(this.lang.helpEnterQue)
        legal = false
      } else {
        legal = true
      }
      return legal
    },
    // 表单邮箱
    isEmail (str) {
      var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/
      return reg.test(str)
    },

    // 选择图片
    imgUpload (obj) {
      var oInput = '#' + obj.inputId
      let self = this

      $(oInput).on('change', function () {
        var fileImg = $(oInput)[0]
        var fileList = fileImg.files
        self.addNewContent(fileList)
      })
    },

    tip (message) {
      $('#file').val('')
      ModalApi.message(message)
    },

    // 图片展示
    addNewContent (obj) {
      var files = obj
      var hasExe = false
      var overSize = false

      // 如果文件数大于5个，禁止拖拽增加
      if (files.length > 5 || $('#imgBox').children().length > 5 || parseInt(files.length + this.filesList.length) > 5) {
        this.tip(this.lang.helpFileToomuch)
        return
      }

      // 判断上传文件列表中是否包含exe文件类型
      for (var i = 0; i < files.length; i++) {
        if (!files[i].name.match('exe') && files[i].size / 1024 <= 1024 * 5) {
          this.filesList.push(files[i])
        } else {
          if (files[i].name.match('exe')) {
            this.tip(this.lang.helpFileType)
          }
          if (files[i].size / 1024 > 1024 * 5) {
            this.tip(this.lang.helpFileSize)
          }
        }
      }
      if (hasExe) {
        this.tip(this.lang.helpFileType)
      }
      if (overSize) {
        this.tip(this.lang.helpFileSize)
      }
    },
    // 删除
    removeImg (obj, index) {
      this.filesList.splice(index, 1)
      $(obj).parent().remove()
    },
    hideTypeSelect () {
      this.typeSelect = false
    },
    // 判断表格状态，切换提交按钮状态
    checkBtn () {
      if (this.emailAddress && this.queType && this.queContent) {
        this.formEmpty = true
      } else {
        this.formEmpty = false
      }
    }
  },
  mounted () {
    let self = this
    self.init()
    self.getQueType()
    // 点击空白收起问题类型
    document.addEventListener('click', this.hideTypeSelect)

    // 上传图片插件
    self.imgUpload({
      inputId: 'file',          // input框id
      imgBox: 'imgBox',         // 图片容器id
      buttonId: 'submit',       // 提交按钮id
      upUrl: '',                // 提交地址
      data: 'file1'             // 参数名
    })

    // 禁止文件拖拽上传
    var file = document.getElementById('file')
      file.addEventListener("drop", function(e){
      e.stopPropagation()
      e.preventDefault()
      var dt = e.dataTransfer
      var files = dt.files
    }, false);
  }
}
</script>

<style lang="less">
#feedback{
  color: white;

  .main {
    width: 1000px;
    margin: 40px auto 0 auto;

    h1 {
      padding-bottom: 20px;
      font-size: 20px;
      text-align: center;
      border-bottom: 1px solid #48576A;
    }
    h3 {
      font-size: 14px;
      text-align: center;
      margin: 40px 0;
    }

    .form-fill {
      width: 80%;
      margin: 0 auto 50px auto;
      display: flex;
      flex-direction: column;

      .item {
        margin-top: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;

        .fill {
          width: 70%;
          position: relative;

          .err-tips {
            position: absolute;
            bottom: -20px;
            left: 30px;
            color: #d63434;
          }
        }

        .name {
          width: 20%;
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          position: relative;

          i {
            color: #f00;
            font-size: 18px;
            position: absolute;
            top: 20%;
            right: -10px;
          }
        }
        .typeList {
          width: 70%;
          position: relative;

          ul {
            width: 100%;
            position: absolute;
            top: 46px;
            left: 30px;
            font-size: 14px;
            z-index: 2;

            li {
              height: 46px;
              line-height: 46px;
              background-color: #2A3440;
              text-indent: 26px;
              border-top: solid 1px #48576A;
              cursor: pointer;
            }
            li:last-child {
              border-bottom: solid 1px #48576A;
            }
            li:hover {
              background-color: #365172;
            }
          }

          input {
            width: 100%;
          }
        }
        /*=== 上传 ===*/
        #upBox {
          width: 70%;
          margin-left: 30px;
          position: relative;
          box-sizing: border-box;

          #inputBox {
            height: 46px;
            line-height: 46px;
            position: relative;
            text-align: center;
            border: 1px dashed #979797;
            border-radius: 2px;

            .text {
              font {
                color: #3782FF;
              }
            }

            input[type=file] {
              width: 100%;
              position:absolute;
              top: 0;
              left: 0;
              box-sizing: border-box;
              opacity: 0;
              margin-left: 0;
              padding: 0;
            }
          }

          #imgBox {
            .imgContainer {
              display: flex;
              flex-direction: row;
              align-items: center;
              margin-top: 20px;

              span {
                margin-left: 10px;
                padding-right: 50px;
              }
              .imgDelete {
                cursor: pointer;
                padding-top: 2px;
              }
            }
          }
        }

        input {
          width: 100%;
          height: 46px;
          line-height: 46px;
          margin-left: 30px;
          padding: 0 50px 0 20px;
          border-radius: 2px;
          box-sizing: border-box;
          background-color: #2A3440;
          color: #fff;
        }
        textarea {
          width: 100%;
          height: 168px;
          margin-left: 30px;
          padding: 10px 20px;
          background-color: #2A3440;
          color: #fff;
          box-sizing: border-box;
          resize: none;
        }
      }
      .item:first-child {
        margin-top: 0;
      }
      .item:nth-child(3) .name {
        align-self: flex-start;
        margin-top: 10px;
      }
      .item:nth-child(2) {
        input {
          background-image: url('./images/arrow.png');
          background-position: 98% center;
          background-repeat: no-repeat;
          cursor: pointer;
        }
      }
      .item:nth-child(4) {
        .name {
          align-self: flex-start;
          margin-top: 20px;
        }
      }
      #submit {
        width: 270px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin: 70px auto 0 auto;
        background-color: #2A3441;
        cursor: pointer;
        border-radius: 2px;
        color: #fff;
      }
      #submit.blue {
        background-color: #3782FF;
      }
    }
    .textTip {
      text-align: center;
    }
  }
/*=== 输入框，文本域占位文字 ===*/
::-webkit-input-placeholder { color: #999; }
::-moz-placeholder { color: #999; }
:-ms-input-placeholder { color:#999; }
input:-moz-placeholder { color:#999; }
}

.modal {
  width: auto;
}

/*== 800px ==*/
@media only screen and (max-width: 1200px) {
  #feedback {
    .main {
      width: 730px;
    }
  }
}


</style>
